<template>
  <body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
  <header class="am-header">
    <h1>支付宝支付</h1>
  </header>
  <div id="main">
    <form name=alipayment :action='visitApi' method=post target="_blank">
      <div id="body" style="clear:left">
        <span style="color: #ee0a24">请在如下时间内付款：</span>
<!--        倒计时-->
        <van-count-down :time="time" />
        <dl class="content">
          <dt>商户订单号：</dt>
          <dd>
            <input id="WIDout_trade_no"   name="WIDout_trade_no" v-model="WIDout_trade_no" />
          </dd>
          <hr class="one_line">
          <dt>订单名称：</dt>
          <dd>
            <input id="WIDsubject"  name="WIDsubject" v-model="WIDsubject" />
          </dd>
          <hr class="one_line">
          <dt>付款金额：</dt>
          <dd>
            <input id="WIDtotal_amount"  name="WIDtotal_amount" v-model="WIDtotal_amount" />
          </dd>
          <hr class="one_line"/>
          <dt>商品描述：</dt>
          <dd>
            <input id="WIDbody"  name="WIDbody" v-model="WIDbody" />
          </dd>
          <hr class="one_line">
          <dt></dt>
          <dd id="btn-dd">
                        <span class="new-btn-login-sp">
                            <button class="new-btn-login" type="submit" style="text-align:center;">确 认</button>
                        </span>
            <span class="note-help">如果您点击“确认”按钮，即表示您同意该次的执行操作。</span>
          </dd>
        </dl>
      </div>
    </form>
    <div id="foot">
      <ul class="foot-ul">
        <li>
          支付宝版权所有 2020-2025 ALIPAY.COM
        </li>
      </ul>
    </div>
  </div>
  </body>
</template>

<script>
  import Vue from 'vue';
  import request from '@/utils/request'
  import Global from "../Global";
  import { CountDown } from 'vant';

  Vue.use(CountDown);
    export default {
      name: "orderDetailPage",
      created() {
        // this.GetDateNow();
        this.fillOrder();
        request({
          // this.$route.query.order['orderId']
          url: '/order/customer/queryOrderById?orderId=' + this.$route.query.order['orderId'],
          method: 'get'
        }).then(res => {
          this.queryOrder = res;
          var date = new Date(res['createDate']);
          // 有三种方式获取
          var time1 = date.getTime() + 30 * 60 * 1000;
          var nowTime = new Date();
          console.log(time1 - nowTime);
          if ((time1 - nowTime) <= 0) {
            this.time = 0;
          }else {
            this.time = time1 - nowTime;
          }
        });
      },
      data(){
        return{
          queryOrder:{},
          order:{},
          WIDout_trade_no:"",
          WIDsubject:"",
          WIDtotal_amount:"",
          WIDbody:"",
          visitApi:window.location.protocol + "//"+ window.location.host.replace(window.location.port,'8787')+"/ailipay/pay",
          time: 30 * 60 * 60 * 1000,
        }
      },
      methods:{
        GetDateNow() {
          var vNow = new Date();
          var sNow = "";
          sNow += String(vNow.getFullYear());
          sNow += String(vNow.getMonth() + 1);
          sNow += String(vNow.getDate());
          sNow += String(vNow.getHours());
          sNow += String(vNow.getMinutes());
          sNow += String(vNow.getSeconds());
          sNow += String(vNow.getMilliseconds());
          document.getElementById("WIDout_trade_no").value =  sNow;
          document.getElementById("WIDsubject").value = "手机网站支付测试商品";
          document.getElementById("WIDtotal_amount").value = "0.01";
          document.getElementById("WIDbody").value = "购买测试商品0.01元";
        },
        fillOrder(){
          this.order = this.$route.query.order;
          this.WIDout_trade_no = this.order['orderId'];
          this.WIDsubject = '租车';
          this.WIDtotal_amount = this.order['price'];
          this.WIDbody = '租车生活';
        }
      }
    }
</script>

<style scoped>
  *{
    margin:0;
    padding:0;
  }
  ul,ol{
    list-style:none;
  }
  body{
    font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  }
  .hidden{
    display:none;
  }
  .new-btn-login-sp{
    padding: 1px;
    display: inline-block;
    width: 75%;
  }
  .new-btn-login {
    background-color: #02aaf1;
    color: #FFFFFF;
    font-weight: bold;
    border: none;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    font-size: 16px;
  }
  #main{
    width:100%;
    margin:0 auto;
    font-size:14px;
  }
  .red-star{
    color:#f00;
    width:10px;
    display:inline-block;
  }
  .null-star{
    color:#fff;
  }
  .content{
    margin-top:5px;
  }
  .content dt{
    width:100px;
    display:inline-block;
    float: left;
    margin-left: 20px;
    color: #666;
    font-size: 13px;
    margin-top: 8px;
  }
  .content dd{
    margin-left:120px;
    margin-bottom:5px;
  }
  .content dd input {
    width: 85%;
    height: 28px;
    border: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
  }
  #foot{
    margin-top:10px;
    position: absolute;
    bottom: 15px;
    width: 100%;
  }
  .foot-ul{
    width: 100%;
  }
  .foot-ul li {
    width: 100%;
    text-align:center;
    color: #666;
  }
  .note-help {
    color: #999999;
    font-size: 12px;
    line-height: 130%;
    margin-top: 5px;
    width: 100%;
    display: block;
  }
  #btn-dd{
    margin: 20px;
    text-align: center;
  }
  .foot-ul{
    width: 100%;
  }
  .one_line{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #eeeeee;
    width: 100%;
    margin-left: 20px;
  }
  .am-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: box;
    width: 100%;
    position: relative;
    padding: 7px 0;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #1D222D;
    height: 50px;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    box-align: center;
  }
  .am-header h1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    box-flex: 1;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
  }
</style>
